<template>
  <div class="setting">
    <div class="award">
      <div>
        <img :src="require('@/assets/img/FH.webp')" alt="" class="fanhui" @click="fanhui" />
      </div>
      <div class="CJ">
        <span class="c1">成就点</span>
        <br />
        <span class="c2">0</span>
      </div>
    </div>
    <div class="achievement">
      <div class="grcj"><span>个人成就</span></div>
      <div class="p" v-for="(item, index) in Enter" :key="index">
        <img :src="require('@/assets/img/achievement1.webp')" alt="" v-if="item === 0" />
        <p>持之以恒</p>
      </div>
    </div>
    <div class="activity">
      <p style="font-size: 15px; text-align: left; font-weight: 600">
        活动成就
      </p>
      <div>
        <img :src="require('@/assets/img/tt.webp')" alt="" class="BJ" />
      </div>
      <p style="font-size: 10px; font-weight: 600">暂时还没有成就哦</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Enter: []
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.getEnter();
  },
  methods: {
    getEnter() {
      fetch("http://118.31.35.160:4000/user/register", {
        method: "post",
        body: JSON.stringify({
          phone: localStorage.getItem("user")
        }),
        headers: new Headers({
          "Content-Type": "application/json"
        })
      })
        .then(response => {
          return response.json();
        })
        .then(res => {
          this.Enter = res.results[0].success;
          console.log(this.Enter);
        });
    },
    fanhui() {
      this.$router.back(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.setting {
  width: 375px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.award {
  //overflow: hidden;
  width: 375px;
  height: 215px;
  background: url("../assets/img/beijin.webp") no-repeat;
  background-size: 375px 215px;
  position: relative;
  .fanhui {
    width: 12px;
    height: 15px;
    margin-right: 330px;
  }
  .CJ {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 45px;
    left: 10px;
    .c1 {
      font-size: 10px;
      color: #ffffff;
    }
    .c2 {
      font-size: 27px;
      color: #ffffff;
    }
  }
}
.achievement {
  width: 350px;
  height: 400px;
  background-color: #ffffff;
  position: relative;
  z-index: 999;
  margin-top: -55px;
  margin-left: 0;
  border-radius: 0.3333em;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  .grcj {
    width: 100%;
    height: 20px;
  }
}
.p {
  width: 110px;
  height: 116px;
  float: left;
  margin-right: 1px;
  margin: 3px;
  text-align: center;
  img {
    width: 80px;
    height: 80px;
  }
  p {
    text-align: center;
  }
}
.activity {
  width: 350px;
  height: 200px;
  background-color: #ffffff;
  position: relative;
  margin-top: 20px;
  border-radius: 0.3333em;
  .BJ {
    width: 298.5px;
    height: 94px;
  }
}
</style>
